body {
    font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, sans-serif;
    background: #f6f6f6;
}

.mdui-bottom-nav-fixed .mdui-bottom-nav {
    z-index: 1000;
}

.mdui-select {
    margin-top: 16px;
}

.none-text-transform-btn {
    text-transform: none;
}

.mdui-fab {
    z-index: 2;
}

.mdui-btn .mdui-spinner {
    width: 20px;
    height: 20px;
    top: 4px;
}

.mdui-list-item-two-line {
    height: auto;
    max-height: 40px;
}

figure {
    margin: 0;
}

.sticky {
    position: fixed;
    top: 0;
    z-index: 9999;
}

.w-e-panel-container {
    position: fixed !important;
    top: 30% !important;
}

.w-e-panel-tab-content {
    background-color: #f6f6f6;
}

.mdui-container {
    overflow-x: hidden;
    padding-bottom: 5px;
}

/*小屏设备右下按钮底部边距*/
@media (max-width: 599px) {

    .mdui-fab-fixed,
    .mdui-fab-wrapper {
        bottom: 66px;
    }
}

.mdui-textfield .mdui-icon~.mdui-textfield-error,
.mdui-textfield .mdui-icon~.mdui-textfield-flex-wrap,
.mdui-textfield .mdui-icon~.mdui-textfield-helper,
.mdui-textfield .mdui-icon~.mdui-textfield-input,
.mdui-textfield .mdui-icon~.mdui-textfield-label {
    width: calc(100% - 45px);
    margin-left: 45px;
}

/*顶部padding （移动端适配tab选项卡及drawer）*/
/*无tab 有底部导航栏*/
@media (min-width: 600px) {
    .body-padding {
        padding-top: 120px;
        padding-bottom: 0;
    }
}

/*有tab 无底部导航栏*/
@media (max-width: 600px) {
    .body-padding {
        padding-top: 60px;
        padding-bottom: 56px;
    }
}

@media (min-width: 1024px) {
    .drawer-padding-top {
        top: 20%;
    }
}

@media (min-width: 1024px) {
    .mdui-drawer {
        z-index: 800;
    }
}


/*应用栏右方下拉菜单*/
.appbar-menu {
    width: auto;
}

.full-width-menu {
    width: auto;
}

.appbar-menu .user-div {
    width: 250px;
    height: 90px;
}

.appbar-menu .user-div .user-profile {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    position: absolute;
    top: 27px;
    left: 15px;
    text-shadow: black 0.1em 0.1em 0.2em
}

.appbar-menu-title {
    line-height: 18px;
    font-size: 18px;
    position: absolute;
    top: 25px;
    left: 85px;
}

.appbar-menu-subtitle {
    line-height: 14px;
    font-size: 12px;
    position: absolute;
    top: 53px;
    left: 85px;
    width: 160px;
    white-space: initial;
    opacity: .7;
    height: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
}

.appbar-menu-subtitle button {
    min-width: 0;
    padding: 0 5px;
    font-size: 13px;
}

/*抽屉菜单*/
.drawer-menu {
    padding: 0 0;
    box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
}

.drawer-top {
    position: relative;
}

.drawer-top-img {
    -webkit-filter: brightness(0.7);
    filter: brightness(0.7);
    width: 100%;
    min-height: 175px;
    max-height: 225px;
}

.drawer-top-profile {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    left: 15px;
    bottom: 80px;
    text-shadow: black 0.1em 0.1em 0.2em
}

.drawer-top-title {
    position: absolute;
    left: 15px;
    bottom: 40px;
    font-size: 17px;
    font-weight: 800;
    text-shadow: black 0.1em 0.1em 0.2em
}

.drawer-top-title button {
    min-width: 0;
    padding: 0 10px;
    height: 26px;
    line-height: 26px;
}

.drawer-top-subtitle {
    width: 180px;
    position: absolute;
    left: 15px;
    bottom: 17px;
    font-weight: 500;
    text-shadow: black 0.1em 0.1em 0.2em
}

.drawer-top-close {
    position: absolute;
    top: 10px;
    right: 10px;
}

@media (min-width: 600px) {
    .drawer-top-title {
        left: 20px;
    }

    .drawer-top-subtitle {
        left: 20px;
    }
}

/*底部导航栏*/
.bottom-nav {
    background-color: white;
    opacity: 0.95;
}

/*首页轮播图高度自适应*/
.index-carousel {
    height: 200px;
}

@media (min-width: 600px) {
    .index-carousel {
        height: 350px;
    }
}

@media (min-width: 800px) {
    .index-carousel {
        height: 400px;
    }
}

@media (min-width: 1024px) {
    .index-carousel {
        height: 320px;
    }
}

@media (min-width: 1380px) {
    .index-carousel {
        height: 420px;
    }
}

/*首页轮播图片高度自适应*/
.index-carousel-img {
    height: 200px;
}

@media (min-width: 600px) {
    .index-carousel-img {
        height: 350px;
    }
}

@media (min-width: 800px) {
    .index-carousel-img {
        height: 400px;
    }
}

@media (min-width: 1024px) {
    .index-carousel-img {
        height: 320px;
    }
}

@media (min-width: 1380px) {
    .index-carousel-img {
        height: 420px;
    }
}

.banner-container .mdui-card-primary-title {
    text-shadow: 1px 1px 10px #333;
}

.banner-container .mdui-card-primary-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/*宽度1024-1379之间的响应式工具*/
@media (min-width: 1024px) and (max-width: 1397px) {
    .small-pc-hidden {
        display: none !important;
    }
}

/*轮播图标题框*/
.index-carousel-primary {
    position: relative;
    padding: 10px 16px 10px 16px;
}

@media (max-width: 600px) {
    .index-carousel-primary .mdui-card-primary-title {
        font-size: 20px;
    }

    .index-carousel-primary .mdui-card-primary-subtitle {
        font-size: 16px;
    }
}

/*轮播图右表格*/
.index-carousel-r-table td {
    white-space: nowrap;
}

.index-carousel-r-table td>.mdui-icon,
.index-carousel-r-table td>.mdui-icon::before {
    font-size: 18px;
    padding-right: 5px;
}

.index-carousel-r-table td>.mdui-icon::before {
    width: 18px;
    height: 18px;
    padding-right: 5px;
}

/*首页板块上方小轮播*/
.index-small-top-carousel {
    max-height: 150px;
}

/*=====================公用标题部分类=========================*/
/*版块标题*/
.part-title,
.part-title-blue,
.part-title-red {
    border-left: 8px solid rgba(0, 0, 0, 0.65);
    font-size: 22px;
    font-weight: bold;
    margin: 20px 0 10px 0;
    padding: 10px 20px 9px 10px;
    line-height: 18px;
    background-color: #f0f0f0;
    color: #3f3f3f;
    border-radius: 5px;
}

/*版块标题蓝*/
.part-title-blue {
    border-left: 8px solid #42a5f5;
}

/*版块标题红*/
.part-title-red {
    border-left: 8px solid #FF3338;
}

/*版块标题按钮*/
.part-title-more-btn {
    float: right !important;
    margin: -2px 0;
}

.part-title-blue>.part-title-more-btn {
    color: #3c89d2;
}

.part-title-red>.part-title-more-btn {
    color: #d1292d;
}

/*版块标题*/
.part-title-with-bg,
.part-title-with-bg-blue,
.part-title-with-bg-red {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0 10px 0;
    padding: 10px 20px 9px 10px;
    line-height: 18px;
    background-color: #f6f6f6;
    border-radius: 8px;
}

.part-title-with-bg .part-title-more-btn {
    float: right !important;
    margin: -7px 0;
}


/*侧边栏标题*/
.side-column-title {
    border-bottom: 5px solid #00b0ff;
    font-size: 22px;
    font-weight: bold;
    margin: 20px 0 10px 0;
    padding: 5px;
    line-height: 22px;
    background-color: #fff;
    text-align: right;
}

/*含下划线的标题*/
.title-with-bottom-border {
    border-bottom: 5px solid #00b0ff;
    font-size: 22px;
    font-weight: bold;
    margin: 20px 0 10px 0;
    padding: 5px;
    line-height: 22px;
    background-color: #fff;
}

.title-with-bottom-border small {
    font-size: 14px;
    padding-left: 5px;
    font-weight: normal;
    opacity: .9;
}

.side-card {
    border-radius: 5px;
}

.side-card-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #f6f6f6;
    box-sizing: border-box;
}

.side-card-header .reply-order-tab {
    float: right;
    margin: 0;
}

.side-card-header-text {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    color: #2b2b2b;
}

.side-card-header-text small {
    font-size: 90%;
    font-weight: normal;
    color: #646464;
}

.side-card-content {
    color: #2e2e2e;
    padding: 12px 0;
}

.side-card-content-with-p-x {
    color: #2e2e2e;
    padding: 12px 20px;
}

.side-card-action {
    text-align: right;
    padding: 0 20px 12px;
}

.side-card-user-avatar {
    display: block;
    width: 70px;
    height: 70px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
}

.side-card-user-name {
    text-align: center;
    margin-top: 15px;
    font-size: 16px;
    font-weight: bold;
}

.side-card-user-motto {
    padding: 0 20px;
    text-align: center;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.7;
}

.side-card-user-info {
    box-shadow: none;
    -webkit-box-shadow: none;
    margin-top: 10px;
}

.side-card-user-info .mdui-panel-item-header {
    padding: 0;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.side-card-user-info .mdui-panel-item-arrow {
    right: 0;
}

.side-card-user-info .mdui-panel-item-body {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.side-card-user-btn {
    width: 80%;
}

.side-card-user-btn .mdui-icon {
    font-size: 18px;
    padding-bottom: 2px;
}

.side-card-content-item {
    padding: 3px 20px 3px 20px;
}

.content-card {
    overflow: visible;
    border-radius: 10px;
    padding: 10px 20px;
}

.index-content-card {
    overflow: visible;
    border-radius: 8px;
    padding: 1px 20px 10px;
}

/*首页新闻头条版块*/
/*图片*/
.topnews-img-card {
    max-height: 300px;
    max-width: 200px;
}

/*图片标题框*/
.topnews-img-primary {
    position: relative;
    padding: 8px 10px 6px 10px;
}

.topnews-img-primary .mdui-card-primary-title {
    line-height: 20px;
}

.topnews-img-primary .mdui-card-primary-subtitle {
    line-height: 18px;
}

@media (max-width: 600px) {
    .topnews-img-primary .mdui-card-primary-title {
        font-size: 18px;
    }

    .topnews-img-primary .mdui-card-primary-subtitle {
        font-size: 14px;
    }
}

/*新闻页右侧两卡片间距*/
.card-margin {
    margin-top: 10px;
}


/*头条文字样式*/
.topnews-h1,
.topnews-h2,
.topnews-part-name {
    display: block;
    overflow: hidden;
    /*溢出隐藏*/
    text-overflow: ellipsis;
    /*文本溢出省略号*/
    white-space: nowrap;
    /*不换行*/
}

.topnews-h1 {
    font-size: 20px;
    font-weight: bold;
}

.topnews-h2 {
    font-size: 18px;
    font-weight: 500;
}

.topnews-part-name {
    font-size: 14px;
    color: #cd0000;
    font-weight: bold;
    margin-bottom: 3px;
}

@media (max-width: 600px) {
    .topnews-h1 {
        font-size: 18px;
        font-weight: bold;
        overflow: visible;
        /*溢出不隐藏*/
        white-space: normal;
        /*不换行*/
    }

    .topnews-h2 {
        font-size: 16px;
        overflow: visible;
        /*溢出不隐藏*/
        text-overflow: ellipsis;
        /*文本溢出省略号*/
        white-space: normal;
        /*不换行*/
    }

    .topnews-part-name {
        overflow: visible;
        /*溢出不隐藏*/
        white-space: normal;
        /*不换行*/
    }
}

.part-divider-tab>a {
    min-width: fit-content;
    min-height: 48px;
    max-height: 72px;
    padding: 12px;
    font-size: 14px;
    opacity: .7;
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;

}

/*首页资讯版块*/
.info-first-img {
    width: 100%;
    max-width: 200px;
}

/*资讯文字样式*/
.index-info-h {
    font-size: 16px;
}

.index-info-img-h {
    /*图片旁标题允许换行*/
    word-wrap: break-word;
    display: block;
    padding: 20px 10px 0 5px;
    font-size: 22px;
    line-height: 1.3em;
    color: #1065cd;
    font-weight: bold;
}

@media (max-width: 600px) {
    .index-info-h1 {
        font-size: 14px;
    }

    .index-info-img-h {
        padding-top: 5px;
        font-size: 18px;
        color: #1065cd;
        font-weight: bold;
    }
}

.index-info-img-area {
    float: left;
}

.index-info-text-area {
    padding: 12px;
    float: left;
}

/*首页列表样式*/
.index-list>.mdui-list-item {
    padding-left: 10px;
}

/*首页社区一级分类样式*/
.index-community-top-level-title {
    padding: 15px 0 5px 40px;
    font-size: 20px;
    font-weight: 400;
    opacity: .95;
}

/*首页社区版块（二级分类）卡片样式*/
.category-card-header {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/*首页社区版块（二级分类）卡*/
.index-community-card {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    color: #000;
    border-radius: 5px;
    -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .1), 0 2px 2px 0 rgba(0, 0, 0, .07), 0 1px 5px 0 rgba(0, 0, 0, .06);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .1), 0 2px 2px 0 rgba(0, 0, 0, .07), 0 1px 5px 0 rgba(0, 0, 0, .06);
    margin-top: 10px;
    margin-bottom: 10px;
    background: url("../imgs/index_community_card_bg.jpg");
    background-size: 100% 100%;
    height: 115px;
}

/* 卡片头像 */
.index-community-card-header-avatar {
    float: left;
    width: 100px;
    height: 100px;
    margin: 7px;
    border-radius: 5%;
}

/* 卡片标题 */
.index-community-card-header-title {
    display: block;
    padding-top: 15px;
    margin-left: 52px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .87;
}

/* 卡片副标题 */
.index-community-card-header-count {
    display: block;
    margin-left: 52px;
    padding-bottom: 3px;
    padding-right: 8px;
    overflow: hidden;
    font-size: 12px;
    opacity: .7;
    line-height: 16px;
}

/* 卡片副标题 */
.index-community-card-header-subtitle {
    margin-left: 52px;
    padding-bottom: 8px;
    padding-right: 8px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 300;
    line-height: 20px;
    opacity: .6;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/*登录部分CSS*/
.login-dialog,
.register-dialog,
.reset-dialog {
    max-width: 448px;
    overflow-y: auto
}

.login-dialog .back,
.login-dialog .close,
.register-dialog .back,
.register-dialog .close,
.reset-dialog .back,
.reset-dialog .close {
    display: block;
    position: absolute;
    left: 4px;
    top: 4px;
    z-index: 2;
}

.login-dialog .avatar,
.register-dialog .avatar,
.reset-dialog .avatar {
    display: block;
    position: absolute;
    left: 36px;
    top: 40px;
    color: hsla(0, 0%, 100%, .56);
    font-size: 76px
}

.login-dialog .mdui-dialog-title,
.register-dialog .mdui-dialog-title,
.reset-dialog .mdui-dialog-title {
    padding: 140px 40px 20px;
    margin-bottom: 24px;
    line-height: 36px;
    text-shadow: black 0.05em 0.05em 0.05em;
    position: relative;
}

.login-dialog .login-bg {
    background: url("../imgs/login_dialog_bg.jpg");
    background-size: 100% 100%;
}

.register-dialog .register-bg {
    background: url("../imgs/register_dialog_bg.jpg");
    background-size: 100% 100%;
}

.reset-dialog .reset-bg {
    background: url("../imgs/reset_dialog_bg.jpg");
    background-size: 100% 100%;
}

.login-dialog form,
.register-dialog form,
.reset-dialog #resetForm {
    padding: 0 40px 40px 30px;
}

.login-dialog .more-option,
.register-dialog .more-option,
.reset-dialog .more-option {
    margin-left: -16px
}

.login-dialog .dialog-top-tip-button,
.register-dialog .dialog-top-tip-button,
.reset-dialog .dialog-top-tip-button {
    position: absolute;
    right: 5px;
    padding: 0 8px;
    bottom: 28px;
}

.login-dialog .captcha-field,
.register-dialog .captcha-field,
.reset-dialog .captcha-field {
    margin-right: 116px;
    overflow: visible
}

.login-dialog .captcha-image,
.register-dialog .captcha-image,
.reset-dialog .captcha-image {
    position: absolute;
    right: -116px;
    bottom: 29px;
    cursor: pointer
}

.login-dialog .send-email-field,
.register-dialog .send-email-field,
.reset-dialog .send-email-field {
    margin-right: 116px;
    overflow: visible
}

.login-dialog .send-email,
.register-dialog .send-email,
.reset-dialog .send-email {
    position: absolute;
    right: -116px;
    bottom: 29px
}

.login-dialog .actions,
.register-dialog .actions,
.reset-dialog .actions {
    margin-top: 24px;
    padding-left: 6px;
}

.login-dialog .success,
.register-dialog .success {
    min-height: 250px;
    padding: 0 40px 62px
}

.reset-dialog .success {
    min-height: 250px;
    padding: 0 10px 62px
}

.login-dialog .success .icon,
.register-dialog .success .icon,
.reset-dialog .success .icon,
#createMessageContentDialog .success .icon {
    font-size: 100px;
}

.login-dialog .success h3,
.register-dialog .success h3,
.reset-dialog .success h3,
#createMessageContentDialog .success h3 {
    text-align: center;
    opacity: 0.8;
}

.login-dialog .success .btns,
.register-dialog .success .btns,
.reset-dialog .success .btns,
#createMessageContentDialog .success .btns {
    margin-top: 30px;
    text-align: center;
}

@media (max-width:599px) {

    .login-dialog,
    .register-dialog,
    .reset-dialog {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important
    }

    .login-dialog .back,
    .login-dialog .close,
    .register-dialog .back,
    .register-dialog .close,
    .reset-dialog .back,
    .reset-dialog .close {
        left: 8px;
        top: 10px;
        z-index: 2;
    }

    .login-dialog .avatar,
    .register-dialog .avatar,
    .reset-dialog .avatar {
        display: none
    }

    .login-dialog .mdui-dialog-title,
    .register-dialog .mdui-dialog-title,
    .reset-dialog .mdui-dialog-title {
        line-height: 36px;
        height: 30%;
        position: relative;
        padding: 0 30px;
    }

    .login-dialog .mdui-dialog-title .dialog-title,
    .register-dialog .mdui-dialog-title .dialog-title,
    .reset-dialog .mdui-dialog-title .dialog-title {
        position: absolute;
        bottom: 30px;
    }

    .login-dialog .dialog-top-tip-button,
    .register-dialog .dialog-top-tip-button,
    .reset-dialog .dialog-top-tip-button {
        position: absolute;
        bottom: 30px;
    }

    .login-dialog form,
    .register-dialog form,
    .reset-dialog #resetForm {
        padding: 0 24px 24px
    }

    .login-dialog form .mdui-textfield,
    .register-dialog form .mdui-textfield,
    .reset-dialog #resetForm .mdui-textfield {
        padding-top: 4px
    }

    .login-dialog .actions,
    .register-dialog .actions,
    .reset-dialog .actions {
        margin-top: 14px
    }
}

/*新闻页列表块*/
.news-list-item {
    position: relative;
    min-height: 95px;
    padding: 10px;
    transition: background-color .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-list-item-img {
    position: absolute;
    width: 120px;
    height: 80px;
}

/*新闻页列表块图片*/
.news-list-item-title {
    padding-left: 130px;
    font-size: 18px;
}

.news-list-item-content {
    padding-left: 130px;
    opacity: .8;
}

.news-list-item-part-name {
    font-size: 14px;
    color: #cd0000;
    font-weight: bold;
    margin-bottom: 3px;
    padding-left: 130px;
}

/*无图新闻列表块*/
.news-list-item-without-img {
    padding: 10px;
    transition: background-color .3s cubic-bezier(0.4, 0, 0.2, 1);

}

.news-list-item:hover,
.news-list-item-without-img:hover {
    background-color: #f3f3f3;
}

.news-list-item-without-img .news-list-item-title {
    padding-left: 5px;
}

.news-list-item-without-img .news-list-item-content {
    padding-left: 5px;
    padding-bottom: 2px;
}

.news-list-item-without-img .news-list-item-part-name {
    padding-top: 12px;
    padding-left: 5px;
}

.news-page-divider {
    margin-top: 20px;
    margin-bottom: 20px;
}

.news-page-divider .page-num {
    position: absolute;
    left: 35px;
    top: -25px;
    font-size: 40px;
    opacity: 0.2;
    font-weight: bold;
    font-family: -webkit-pictograph;
}

.news-page-divider .page-text {
    position: absolute;
    left: 72px;
    top: -15px;
    font-size: 14px;
    opacity: 0.2;
    font-weight: bold;
    font-family: -webkit-pictograph;
}

/*新闻页加载文字提示*/
.loading-tip-text {
    margin-top: 5px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    display: block;
    color: #595959;
}

.follow-dialog .loading-tip-icon {
    font-size: 35px;
}

.follow-dialog .loading-tip-text {
    margin-top: 15px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    display: block;
    opacity: .5;
}

.news-sec-cat-panel-mobile {
    border-radius: 8px;
}

.news-sec-cat-panel-mobile .mdui-panel-item-header {
    background-color: #fcfcfc;
    border-radius: 8px;
}

.news-sec-cat-panel-mobile .mdui-panel-item-title {
    opacity: 0.7;
}

.news-sec-description {
    background: #f6f6f6;
    padding: 20px 30px;
    font-size: 18px;
    opacity: 0.8;
    margin-top: -5px;
    margin-bottom: 10px;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
}

/*二级新闻侧边栏列表*/
.news-sec-side-column-list a {
    font-weight: bold;
    font-size: 16px;
}

/*二级新闻页列表块*/
.news-sec-list-item {
    position: relative;
    min-height: 80px;
    padding: 10px;
}

.news-sec-list-item-img {
    position: absolute;
    width: 120px;
    height: 80px;
}

/*二级新闻页列表块图片*/
.news-sec-list-item-title {
    padding-top: 5px;
    padding-left: 140px;
    font-size: 18px;
}

.news-sec-list-item-content {
    padding-left: 140px;
    opacity: .8;
}

/*无图新闻列表块*/
.news-sec-list-item-without-img {
    padding: 10px;
}

.news-sec-list-item-without-img .news-sec-list-item-title {
    padding-left: 5px;
}

.news-sec-list-item-without-img .news-sec-list-item-content {
    padding-left: 5px;
}


/*社区版块页*/
.part-h {
    font-size: 25px;
    font-weight: 600;
}

.part-h2 {
    padding-top: 10px;
    font-size: 22px;
    font-weight: 600;
}

/*社区主页上方分区小卡片*/
.community-zones-card {
    position: relative;
    display: inline-block;
    height: 38px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 10px 10px;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #e0e0e0;
    border-radius: 22.5px;
    -webkit-transition: -webkit-box-shadow .25s cubic-bezier(.4, 0, .2, 1);
    transition: -webkit-box-shadow .25s cubic-bezier(.4, 0, .2, 1);
    transition: box-shadow .25s cubic-bezier(.4, 0, .2, 1);
    transition: box-shadow .25s cubic-bezier(.4, 0, .2, 1), -webkit-box-shadow .25s cubic-bezier(.4, 0, .2, 1);

    will-change: box-shadow;
}

.community-zones-card:hover,
.community-zones-card:focus {
    -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.community-zones-card:active {
    background-color: #d6d6d6;
}

/* 社区主页上方分区小卡片左侧的图标 */
.community-zones-card-icon {
    position: absolute;
    display: inline-block;
    width: 60px;
    height: 60px;
    left: -6px;
    bottom: -2px;
    margin-right: -4px;
    overflow: hidden;
    font-size: 18px;
    line-height: 32px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    background-color: #989898;
    border-radius: 50%;
}

.community-zones-card-icon .mdui-icon {
    position: absolute;
    top: 4px;
    left: 4px;
    color: #fff;
}

/* 社区主页上方分区小卡片文本 */
.community-zones-card-title {
    display: inline-block;
    height: 38px;
    padding-right: 12px;
    padding-left: 65px;
    font-size: 17px;
    line-height: 38px;
    vertical-align: middle;
}

@media (max-width:600px) {
    .community-zones-card {
        height: 32px;
        margin: 8px 5px;
    }

    .community-zones-card-icon {
        height: 45px;
        width: 45px;
        left: -3px;
        bottom: 0;
    }

    .community-zones-card-title {
        height: 32px;
        font-size: 14px;
        line-height: 32px;
        padding-left: 50px;
    }
}

.community-zone-content {
    margin-top: 60px;
}

.community-zone-top-img {
    height: 150px;
    width: 150px;
    position: absolute;
    top: -60px;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
    border-radius: 10px;
}

.community-zone-top-txt-area {
    min-height: 90px;
}

.community-zone-top-name {
    padding-left: 165px;
    font-size: 22px;
    font-weight: 500;
}

.community-zone-top-sub-area {
    padding-left: 165px;
    padding-top: 5px;
}

.community-zone-top-sub-area .mdui-icon {
    font-size: 22px;
    padding-top: 2px;
    padding-left: 1px;
}

.community-zone-top-description {
    padding: 0 30px;
    margin-top: 10px;
    font-size: 18px;
    opacity: .8;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
}

@media (max-width: 600px) {
    .community-zone-top-img {
        height: 120px;
        width: 120px;
        top: -80px;
        left: calc(50% - 60px);
    }

    .community-zone-content {
        margin-top: 70px;
        padding-top: 50px;
    }

    .community-zone-top-name {
        padding-left: 0;
        text-align: center;
        font-size: 22px;
        font-weight: 500;
    }

    .community-zone-top-sub-area {
        padding-left: 0;
        padding-top: 5px;
        text-align: center;
    }

    .community-zone-top-description {
        padding: 0 10px;
        margin-top: 5px;
        font-size: 18px;
        opacity: .8;
    }


}

.community-section-content {
    margin-top: 60px;
}

.community-section-top-img {
    height: 150px;
    width: 150px;
    position: absolute;
    top: -60px;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
    border-radius: 10px;
}

.community-section-top-txt-area {
    min-height: 90px;
}

.community-section-top-name {
    padding-left: 165px;
    font-size: 22px;
    font-weight: 500;
}

.community-section-top-sub-area {
    padding-left: 165px;
    padding-top: 5px;
}

.community-section-top-sub-area .mdui-icon {
    font-size: 22px;
    padding-top: 2px;
    padding-left: 1px;
}

.community-section-top-description {
    padding: 0 30px;
    margin-top: 10px;
    font-size: 16px;
    opacity: .8;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
}

@media (max-width: 600px) {
    .community-section-top-img {
        height: 120px;
        width: 120px;
        top: -80px;
        left: calc(50% - 60px);
    }

    .community-section-content {
        margin-top: 70px;
        padding-top: 50px;
    }

    .community-section-top-name {
        padding-left: 0;
        text-align: center;
        font-size: 22px;
        font-weight: 500;
    }

    .community-section-top-sub-area {
        padding-left: 0;
        padding-top: 5px;
        text-align: center;
    }

    .community-section-top-description {
        padding: 0 10px;
        margin-top: 5px;
        font-size: 16px;
        opacity: .8;
    }


}


/*社区二级页面顶部介绍卡*/
.community-sec-top-card {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    color: #000;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    background: url("../imgs/index_community_card_bg.jpg");
    background-size: 100% 100%;
}

/* 社区二级页面顶部介绍卡片头像 */
.community-sec-top-card-header-avatar {
    float: left;
    width: 80px;
    height: 80px;
    margin: 15px;
    border-radius: 50%;
}

/* 社区二级页面顶部介绍卡片标题 */
.community-sec-top-card-header-title {
    display: block;
    padding-top: 15px;
    margin-left: 52px;
    overflow: hidden;
    font-size: 20px;
    font-weight: 400;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .87;
}

/* 社区二级页面顶部介绍卡片副标题 */
.community-sec-top-card-header-count {
    display: block;
    margin-left: 52px;
    padding-top: 3px;
    padding-bottom: 5px;
    padding-right: 8px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
}

/* 社区二级页面顶部介绍卡片副标题 */
.community-sec-top-card-header-subtitle {
    display: block;
    margin-left: 110px;
    padding-bottom: 8px;
    padding-right: 8px;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    opacity: .8;
    white-space: normal;
}

.community-section-top-tip,
.community-zone-top-tip {
    position: absolute;
    right: 20px;
    top: -50px;
    font-size: 50px;
    font-weight: bold;
    font-style: italic;
    opacity: .1;
    z-index: -1;
    line-height: 58px;

}

@media (max-width: 600px) {

    .community-section-top-tip,
    .community-zone-top-tip {
        right: 10px;
        top: -30px;
        font-size: 30px;
        line-height: 34px;
    }
}

.community-topic-list .mdui-list-item-avatar {
    width: 40px;
    height: 40px;
}

.community-topic-list .mdui-list-item-avatar img {
    margin-bottom: 5px;
    padding: 2px;
    background-color: #fff;
    border: 1px solid #ddd;
}

.community-topic-list .mdui-list-item {
    border-bottom: 1px solid #f2f2f2;
}

.community-topic-list .mdui-list-item-content {
    font-size: 15px;
    opacity: .8;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: auto;
    -webkit-line-clamp: 2;
}

.community-topic-list .item-info {
    float: right;
    opacity: .4;
    text-align: right;
    font-size: 14px;
}

.community-topic-thumb-up-card {
    padding: 20px 5px 10px;
    border-radius: 5px;
}

.community-topic-thumb-up-card .thumb-up-btn {
    width: 50px;
    height: 50px;
    border: 1px solid #ff4081;
}

.community-topic-thumb-up-card .mdui-panel-item {
    padding-top: 5px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.community-topic-thumb-up-card .mdui-panel-item-title {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding-right: 0;
}

.community-topic-thumb-up-card .topic-voters-list {
    text-align: center;
}

.community-topic-thumb-up-card .topic-voters-list .user-avatar {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    margin-left: 5px;
    margin-bottom: 5px;
    padding: 3px;
    background-color: #fff;
    border: 1px solid #ddd;
}

.news-content-card {
    padding: 20px;
}

/*新闻内容页主标题*/
.news-content-primary-title {
    padding-top: 5px;
    text-align: center;
}

.news-content-primary-title small {
    font-size: 50%;
    opacity: .6;
}

.news-content-primary-title small .mdui-icon {
    opacity: .6;
    font-size: 18px;
}

.news-content-cover-img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: -30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 0;
    padding-bottom: 35%;
    background-repeat: no-repeat;
    background-size: 100%;
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
}

@media (max-width: 600px) {
    .news-content-cover-img {
        margin-bottom: -5px;
        padding-bottom: 40%;
    }
}

/*新闻内容页新闻正文*/
.news-content-primary-text {
    font-size: 18px;
    text-indent: 36px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: "Times New Roman", Times, serif;
}

.news-content-primary-text p {
    margin: 0 0 15px 0;
    line-height: 1.6;
    color: #414040;
}

/*新闻图片80%自适应*/
.news-content-primary-text img {
    max-width: 80%;
    height: auto;
    display: block;
    margin: 10px auto;
    box-shadow: 0 0 30px #ccc;
    -moz-box-shadow: 0 0 30px #ccc;
    -webkit-box-shadow: 0 0 30px #ccc;
}

@media (max-width: 600px) {
    .news-content-primary-text img {
        max-width: 100%;
    }
}

/*新闻内容页侧边栏标题*/
.news-content-side-clumn-list a {
    font-weight: bold;
    font-size: 18px;
}

/*新闻内容页评论条*/
.news-content-comment-list {
    padding: 10px 10px 35px 10px;
    position: relative;
    transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
}

.news-content-comment-list .action-area {
    position: absolute;
    right: 12px;
    opacity: .8;
}

.news-content-comment-list .action-need-hover {
    display: none;
}

/*新闻内容页评论区评论按钮*/
.news-content-comment-list .action-area .mdui-btn {
    padding: 0 10px;
    min-width: 0;
}

.news-content-comment-list:hover {
    background-color: #f3f3f3;
}

.news-content-comment-list:hover .action-need-hover {
    display: inline;
}

/*新闻内容页评论区用户名*/
.news-content-comment-username {
    padding-left: 70px;
    font-size: 18px;
}

/*新闻内容页评论区p标签样式*/
.news-content-comment-p {
    padding-left: 70px;
    font-size: 16px;
    color: #585858;
    line-height: 1.5em;
    padding-bottom: 25px;
}

.news-content-comment-p img {
    display: block;
    margin: 10px auto;
    max-width: 80%;
    box-shadow: 0 0 30px #ccc;
    -moz-box-shadow: 0 0 30px #ccc;
    -webkit-box-shadow: 0 0 30px #ccc;
}

@media (min-width: 600px) {
    .news-content-comment-p img {
        max-width: 60%;
        max-height: 300px;
    }
}

/*新闻内容页评论区用户头像样式*/
.news-content-comment-users-img {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 12.5px;
    left: 15px;
    border-radius: 50%;
    padding: 3px;
    background-color: #fff;
    border: 1px solid #ddd;
    z-index: 0;
}


/*新闻内容页评论区评论按钮*/
.news-content-comment-time {
    position: absolute;
    font-size: 14px;
    top: 10px;
    right: 10px;
    opacity: .8;
}

.news-content-comment-time .mdui-icon {
    font-size: 14px;
}

.news-content-create-comment {
    background-color: #f0f0f0;
    padding: 25px 20px 60px;
    position: relative;
}

.news-content-create-comment-without-login {
    padding: 25px 20px 20px;
}

.news-content-create-comment .tip-icon {
    display: block;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    font-size: 50px;
    opacity: 0.5;
}

.news-content-create-comment .tip-text {
    text-align: center;
    margin-top: 10px;
    font-size: 20px;
    opacity: 0.5;
}

@media (max-width:599px) {
    .news-content-create-comment .tip-icon {
        margin-top: 20px;
    }

    .news-content-create-comment .tip-text {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 15px;
        font-size: 16px;
    }

    .news-content-create-comment .tip-action {
        margin-bottom: 20px;
    }
}

.news-content-create-comment .tip-action {
    text-align: center;
    margin-top: 10px;
    font-size: 16px;
}

.news-content-create-comment .title {
    font-size: 20px;
    padding-bottom: 8px;
}

.news-content-create-comment .title .mdui-icon {
    font-size: 22px;
    opacity: .7;
    padding-right: 10px;
    margin-bottom: 3px;
}

@media (max-width: 599px) {
    .news-content-create-comment .avatar-img {
        width: 80px;
        height: 80px;
        margin: 20px 0;
        border-radius: 10%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 600px) {
    .news-content-create-comment .avatar-img {
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        top: 65px;
    }

    .news-content-create-comment .comment-edit-area {
        padding-left: 70px;
    }
}


.news-content-create-comment .submit-btn {
    display: block;
    margin-top: 10px;
    float: right;
}

/*新闻内容页评论区点赞按钮*/
.news-content-comment-dianzan-btn {
    position: absolute;
    top: 0;
    right: 30px;
}

/*新闻内容页评论输入区边框样式*/
.news-content-comment-area {
    background: white;
    border-radius: 2px;
    width: 95%;
    margin-top: 30px;
    height: auto;
    display: block;
    padding: 12px;
    box-shadow: inset 0 1px 1px 0 #c7c7c7;
    -webkit-border-radius: 5px;
}

/*新闻内容页评论输入区提交按钮*/
.news-content-comment-area-btn {
    float: right;
}

/*个人页面顶部封面cover*/
.user-center-cover {
    height: 0;
    padding-bottom: 30%;
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: visible;
    margin-bottom: 40px;
}

.user-center-cover .cover-upload {
    position: absolute;
    right: 16px;
    top: 16px;
    display: none;
}

.user-center-cover:hover .cover-upload {
    display: block;
}

/*渐变*/
.user-center-cover .gradient {
    height: 100px;
}

.user-center-cover-info {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 24px 16px 16px;
    color: #fff;
}

.user-center-cover-info .avatar-box {
    position: relative;
    float: left;
    margin-right: 16px;
    height: 60px;
}

.user-center-cover-info .avatar-box .avatar {
    width: 95px;
    height: 95px;
    border-radius: 10%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.user-center-cover-info .avatar-box .avatar:hover {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
}

.user-center-cover-info .avatar-box .avatar-upload {
    display: none;
}

.user-center-cover-info .avatar-box:hover .avatar-upload {
    display: block;
}

.user-center-cover-info .username-cover,
.user-center-cover-info .meta {
    margin-left: 76px;
}

.user-center-cover-info .username-cover {
    font-size: 30px;
    display: block;
    line-height: 36px;
    opacity: 1;
}

.user-center-cover-info .meta {
    position: relative;
    opacity: 1;
    line-height: 24px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.54);
    margin-right: 188px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-center-cover-info .meta a {
    color: #fff;
    text-decoration: none;
}

.user-center-cover-info .meta a:hover {
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

.user-center-cover-info .right-btn {
    color: rgba(0, 0, 0, 0.87);
    width: auto;
    font-size: 15px;
    height: 42px;
    line-height: 42px;
    position: absolute;
    right: 16px;
    bottom: 25px;
}

.user-center-cover-info .right-btn.following {
    color: rgba(0, 0, 0, 0.54);
}

@media (max-width: 599px) {
    .user-center-cover {
        padding-bottom: 50%;
        margin-bottom: 250px;
    }

    .user-center-cover-info {
        padding: 0;
        height: 0;
        text-align: center;
        color: rgba(0, 0, 0, 0.87);
    }

    .user-center-cover-info .avatar-box {
        float: none !important;
        margin: -30px 0 0 0 !important;
    }

    .user-center-cover-info .username-cover {
        margin: 50px 0 0 0;
        padding: 0 16px;
        color: rgba(0, 0, 0, 0.87)
    }

    .user-center-cover-info .meta {
        margin: 46px 0 0 0;
        padding: 0 16px;
        color: rgba(0, 0, 0, 0.54);
        overflow: visible;
    }

    .user-center-cover-info .meta a {
        color: rgba(0, 0, 0, 0.87);
    }

    .user-center-cover-info .meta a:hover {
        border-bottom: 1px solid rgba(0, 0, 0, 0.7);
    }

    .user-center-cover-info .meta .followers+span {
        display: none;
    }

    .user-center-cover-info .meta .headline {
        position: absolute;
        top: -32px;
        left: 16px;
        right: 16px;
        overflow: auto;
        white-space: normal;
        text-overflow: ellipsis;
    }

    .user-center-cover-info .menu {
        right: 16px;
        bottom: 16px;
        text-align: left;
    }

    .user-center-cover-info .right-btn {
        position: relative;
        right: 0;
        bottom: 0;
        margin-top: 24px;
    }
}

.avatar-upload {
    overflow: hidden;
    height: 95px;
    width: 95px;
}

.cover-upload {
    overflow: hidden;
    height: 48px;
    width: 48px;
}

.avatar-upload .upload-btn {
    display: block;
    width: 95px;
    min-width: 95px;
    height: 95px;
    background-color: rgba(0, 0, 0, 0.10) !important;
    border-radius: 10%;
}

.cover-upload .upload-btn {
    display: block;
    width: 48px;
    min-width: 48px;
    height: 48px;
    background-color: rgba(0, 0, 0, 0.26) !important;
}

.avatar-upload .upload-btn i,
.cover-upload .upload-btn i {
    color: #fff !important;
    opacity: .9;
}

.avatar-upload .upload-btn:hover,
.cover-upload .upload-btn:hover,
.avatar-upload .upload-btn:active,
.cover-upload .upload-btn:active {
    background-color: rgba(0, 0, 0, 0.26) !important;
}

.avatar-upload .upload-btn:hover i,
.cover-upload .upload-btn:hover i,
.avatar-upload .upload-btn:active i,
.cover-upload .upload-btn:active i {
    opacity: 1;
}

.avatar-upload .upload-btn+input[type="file"],
.cover-upload .upload-btn+input[type="file"] {
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.avatar-upload {
    position: absolute;
    left: 49.5%;
    top: 82%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/*编辑用户资料对话框*/
.edit-user-info-dialog .avatar-box {
    position: absolute;
    float: left;
    margin-right: 16px;
    height: 60px;
}

.edit-user-info-dialog .avatar-box .avatar {
    width: 95px;
    height: 95px;
    border-radius: 10%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.edit-user-info-dialog .user-info-box {
    padding-left: 110px;
}

.edit-info-dialog-right-select {
    float: right;
}

@media (max-width: 599px) {
    .edit-user-info-dialog .avatar-box {
        float: none;
        position: relative;
        display: block;
        margin-right: auto;
        margin-left: auto;
        height: 60px;
    }

    .edit-user-info-dialog .avatar-box .avatar {
        display: block;
        margin-right: auto;
        margin-left: auto;
        width: 95px;
        height: 95px;
        border-radius: 10%;
        border: 2px solid #fff;
        box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .edit-user-info-dialog .user-info-box {
        padding-left: 0;
        padding-top: 40px;
    }
}

/*个人资料侧边栏*/
.side-card-content-item-h {
    font-size: 12px;
    color: #8590a6;
    font-weight: bold;
    margin-bottom: 3px;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
}

.side-card-content-item-c {
    padding-left: 10px;
    font-size: 14px;
}

.right-focus-info {
    color: #646464;
    display: flex;
}

.right-focus-info-item {
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0;
    text-align: center;
    height: auto;
}

.right-focus-info-item:hover {
    transition: all .5s;
    background-color: rgba(0, 0, 0, .1);
}

.right-focus-info-item:hover .right-focus-info-item-name {
    color: #23232e;
}

.right-focus-info-item:not(.mdui-ripple):active {
    background-color: rgba(0, 0, 0, .165);
}

.right-focus-info-item-inner {
    width: 100%;
    text-align: center;
    line-height: 1.6;
    padding: 6px 0;
}

.right-focus-info-item-name {
    font-size: 14px;
    color: #8590a6;
}

.right-focus-info-item-value {
    display: inline-block;
    font-size: 18px;
    color: #1a1a1a;
    font-weight: 600;
}

/*社区话题页主标题*/
.topic-content-primary-title {
    padding-top: 5px;
    padding-left: 20px;
}

.topic-content-primary-title small {
    font-size: 50%;
    opacity: .6;
}

.topic-content-primary-title small .mdui-icon {
    opacity: .6;
    font-size: 18px;
}

.topic-content-cover-img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: -30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 0;
    padding-bottom: 35%;
    background-repeat: no-repeat;
    background-size: 100%;
}

@media (max-width: 600px) {
    .topic-content-primary-title {
        font-size: 1.8em;
    }

    .topic-content-cover-img {
        margin-bottom: -5px;
        padding-bottom: 40%;
    }
}

/*社区话题页正文*/
.topic-content-primary-text {
    text-indent: 36px;
    color: #525252;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 18px;
    font-family: "Times New Roman", Times, serif;
    line-height: 1.4;
}

/*新闻图片80%自适应*/
.topic-content-primary-text img {
    max-width: 80% !important;
    margin: 10px auto;
    height: auto;
    display: block;
    box-shadow: 0 0 30px #ccc;
    -moz-box-shadow: 0 0 30px #ccc;
    -webkit-box-shadow: 0 0 30px #ccc;
}

@media (max-width: 599px) {
    .topic-content-primary-text img {
        max-width: 90% !important;
    }
}

/******
分页
 */
.pagination {
    padding-left: 0;
    margin-top: 10px;
    margin-bottom: 0;
    list-style: none;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

}

.pagination__number {
    line-height: 1;
    text-decoration: none;
    display: inline-block;
    color: #fff;
}

.pagination__item a:hover {
    color: #fe76e1;
}

.pagination__number:hover {
    text-decoration: none;
}

.pagination__number_active {
    font-weight: 700;
}

.pagination__control_prev {
    margin-left: 10px;
}

.pagination__control_next {
    margin-right: 10px;
}

.pagination .pagination__number {
    padding: 10px 15px;
}

.pagination .pagination__number_active {
    color: #fff;
}

/*编辑器*/
.editor-text,
.editor-text-for-create-page {
    min-height: 80px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
    border-radius: 4px;
}

.editor-text-for-create-page {
    min-height: 120px;
    background: #f9f9f9;
    border-radius: 10px;
}

.w-e-text {
    min-height: 80px;
}

.w-e-text img {
    max-width: 80% !important;
    display: block;
    padding-right: 8px;
}

@media (min-width: 600px) {
    .editor-text {
        min-height: 120px;
    }

    .editor-text-for-create-page {
        min-height: 200px;
    }

    .editor-text-for-create-page .w-e-text {
        min-height: 200px;
    }
}

.editor-middle-bar {
    padding: 5px 0;
    color: #6d6d6d;
}

.editor-toolbar {
    padding: 5px 0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
    border-radius: 4px;
}

.editor-toolbar-container {
    height: 28px;
}

.create-page-title {
    line-height: 60px;
    font-size: 30px;
    text-align: center;
}

.tip-page-title {
    line-height: 60px;
    font-size: 30px;
    text-align: center;
    margin-top: 0;
}

.create-page-subtitle {
    line-height: 20px;
    font-size: 16px;
    text-align: center;
    margin-top: -30px;
    margin-bottom: 20px;
}

.create-page-title .mdui-icon {
    font-size: 30px;
    padding-right: 10px;
}

.create-page-card {
    overflow: hidden;
    border-radius: 10px;
    padding: 20px 70px;
}

@media (max-width: 599px) {
    .create-page-card {
        padding: 20px 20px;
    }
}

.admin-error-tip {
    margin: 15px 0 5px 0;
    padding: 15px 20px;
    border-radius: 5px;
}

.create-topic-btn {
    position: absolute;
    right: 15px;
    top: 10px;
    color: #ff4081;
}

@media (max-width: 599px) {
    .create-topic-btn {
        position: relative;
        top: 0;
        margin: 5px auto 16px auto;
        right: 0;
        background-color: #ff4081;
        color: #fff !important;
        display: block;
        width: 70%;
    }

    .create-topic-btn :hover {
        background-color: #ff759d !important;
    }
}

.follow-dialog .dialog-bg {
    background: url("../imgs/follow_dialog_bg.jpg");
    background-size: 100% 100%;
}


.user-list-item .mdui-list-item-avatar {
    margin-right: 10px;
}

.user-list-item .mdui-btn {
    position: absolute;
    right: 0px;
    top: 5px;
}

/* 搜索框提示部分 */
.search-tips-type {
    font-size: 14px;
    font-weight: 500;
}

.search-tips-item {
    font-size: 12px;
    font-weight: 400;
    padding-left: 20px;
}

.search-tips-null {
    font-size: 12px;
    font-weight: 400;
    padding-left: 20px;
}

.search-tips>a {
    height: 36px;
    line-height: 32px;
}

.bar-search-tips>a {
    height: 32px;
    line-height: 30px;
}

.bar-search-tips-content .mdui-icon {
    position: relative;
}

.bar-search-tips-content .search-tips-item {
    padding-left: 10px;
}

.bar-search-tips-content .search-tips-null {
    padding-left: 10px;
}

/*搜索部分*/
.search-input {
    position: relative;
    z-index: auto;
    display: inline-block;
    margin: 1em;
    max-width: 600px;
    width: calc(100% - 5em);
    vertical-align: top;
}

.search-input-field {
    position: relative;
    display: block;
    float: right;
    padding: 0.8em;
    width: 60%;
    border: none;
    border-radius: 0;
    background: #f0f0f0;
    color: #aaa;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-appearance: none;
    /* for box shadows to show on iOS */
}

.search-input-field:focus {
    outline: none;
}

.search-input-label {
    display: inline-block;
    float: right;
    padding: 0 1em;
    width: 40%;
    color: #6a7989;
    font-weight: bold;
    font-size: 70.25%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.search-input-label-content {
    position: relative;
    display: block;
    padding: 1.6em 0;
    width: 100%;
}

/*顶部bar搜索ml*/
.mdui-textfield-expandable .mdui-textfield-input {
    margin-left: 42px;
}

.graphic {
    position: absolute;
    top: 0;
    left: 0;
    fill: none;
}

.icon {
    color: #ddd;
    font-size: 150%;
}

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
    content: '';
    display: table;
}

.clearfix:after {
    clear: both;
}




.container {
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

.content {
    font-size: 16px;
    padding: 10px 0;
    text-align: center;
}

.content h2 {
    margin: 0 0 2em;
    opacity: 0.1;
}

.content p {
    margin: 1em 0;
    padding: 5em 0 0 0;
    font-size: 0.65em;
}

.search-input-field {
    padding: 0.85em 1.5em;
    width: 100%;
    border-radius: 2em;
    background: #fff;
    color: #535d92;
}

.search-input-label {
    z-index: 0;
    padding: 0 0 0 2em;
    width: 100%;
    text-align: left;
}

.search-input-label::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5001;
    width: 100%;
    height: 100%;
    background: rgba(11, 43, 205, 0.6);
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    pointer-events: none;
}

.search-input-label-content {
    padding: 0.5em 0;
}

.search-input-field:focus,
.search-input-field:focus+.search-input-button+.search-input-label .search-input-label-content {
    z-index: 5002;
}

.search-input-button {
    position: absolute;
    width: 45px;
    height: 45px;
    right: -2px;
    top: -2px;
}

.search-input-field:focus+.search-input-button {
    z-index: 5003;
}

.search-input-field:focus+.search-input-button+.search-input-label {
    color: #fff;
}

.search-input-field:focus+.search-input-button+.search-input-label::after {
    opacity: 1;
}

#searchTips {
    margin-top: 10px;
    margin-left: 20px;
}

/*动态列表*/
.activity-list {
    min-height: 75px;
    padding: 10px;
    position: relative;
    transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
    border-bottom: 1px dashed #f6f6f6;
}

.activity-list:hover {
    background-color: #f3f3f3;
}

.activity-list .action-area {
    position: absolute;
    right: 12px;
    opacity: .8;
}

/*动态列表用户名*/
.activity-list-username {
    padding-left: 70px;
    font-size: 18px;
}

/*动态列表p标签样式*/
.activity-list-title {
    padding-left: 70px;
    padding-bottom: 10px;
    font-size: 15px;
    line-height: 1.5em;
    padding-top: 15px;
    color: rgba(12, 12, 12, 0.58);
}

.activity-list-title a {
    opacity: 1;
    color: #0C0C0C;
}

.activity-list-title a:hover {
    opacity: .6;
}

/*动态列表p标签样式*/
.activity-list-title-pink-a .user-name {
    color: #ff4081;
}

.activity-list-title-pink-a .user-name:hover {
    color: #ff004e;
}

.activity-list-title-pink-a .icon-mini {
    font-size: 18px;
    color: #ff0049;
}

.activity-list-title-blue-a .user-name {
    color: #0081ff;
}

.activity-list-title-blue-a .user-name:hover {
    color: #0065ff;
}

.activity-list-title-blue-a .icon-mini {
    font-size: 18px;
    color: #1e5eff;
}

.activity-list-title-teal-a .user-name {
    color: #009688;
}

.activity-list-title-teal-a .user-name:hover {
    color: #00daca;
}

.activity-list-title-teal-a .icon-mini {
    font-size: 18px;
    color: #009688;
}

.activity-list-title-orange-a .user-name {
    color: #FF5722;
}

.activity-list-title-orange-a .user-name:hover {
    color: #ff915f;
}

.activity-list-title-orange-a .icon-mini {
    font-size: 18px;
    color: #FF5722;
}

.activity-list-title-indigo-a .user-name {
    color: #3F51B5;
}

.activity-list-title-indigo-a .user-name:hover {
    color: rgba(63, 81, 181, 0.47);
}

.activity-list-title-indigo-a .icon-mini {
    font-size: 18px;
    color: #3F51B5;
}

.activity-list-title-purple-a .user-name {
    color: #9C27B0;
}

.activity-list-title-purple-a .user-name:hover {
    color: rgba(156, 39, 176, 0.64);
}

.activity-list-title-purple-a .icon-mini {
    font-size: 18px;
    color: #9C27B0;
}

/*动态列表p标签样式*/
.activity-list-p {
    padding-left: 90px;
    padding-top: 5px;
    font-size: 14px;
    opacity: .6;
    line-height: 1.5em;
}

/*动态列表img标签样式*/
.activity-list-img {
    width: 80%;
    margin-top: 10px;
    max-width: 350px;
    max-height: 250px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*动态列表用户头像样式*/
.activity-list-users-img {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 12.5px;
    left: 15px;
    border-radius: 50%;
    padding: 3px;
    background-color: #fff;
    border: 1px solid #ddd;
    z-index: 0;
}


/*动态列表右上角时间*/
.activity-list-time {
    float: right;
    font-size: 14px;
    opacity: .6;
}

.activity-list-time .mdui-icon {
    font-size: 14px;
}

.activity-list-not-logged {
    min-height: 300px;
    text-align: center;
}

.activity-list-not-logged .tip-icon {
    font-size: 50px;
    opacity: 0.6;
}

.activity-list-not-logged .tip-text {
    margin-top: 10px;
    opacity: 0.6;
}

.activity-list-not-logged .tip-action {
    margin-top: 10px;
}

.search-card-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #f6f6f6;
    box-sizing: border-box;
}

.search-card-content {
    padding: 0 0 10px;
}

.community-cat-search-res-item {
    position: relative;
    padding: 0 20px 0;
    min-height: 70px;
    margin-top: 4px;
    margin-bottom: 4px;
    transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
}

.community-cat-search-res-item:hover {
    background-color: #f3f3f3;
}

.community-cat-search-res-item img {
    position: absolute;
    top: 5px;
    height: 60px;
    width: 60px;
    border-radius: 4px;
}

.community-cat-search-res-item .cat-title {
    margin-left: 68px;
    padding-top: 2px;
    font-size: 16px;
    font-weight: 600;
}

.community-cat-search-res-item .cat-subtitle {
    color: #8590a6;
    font-size: 14px;
    margin-left: 68px;
    margin-top: 8px;
}

.user-search-res-item {
    position: relative;
    padding: 0 20px 0;
    min-height: 70px;
    margin-top: 8px;
    margin-bottom: 8px;
    transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
}

.user-search-res-item:hover {
    background-color: #f3f3f3;
}

.user-search-res-item img {
    position: absolute;
    top: 5px;
    height: 60px;
    width: 60px;
    border-radius: 50%;
}

.user-search-res-item .user-name {
    margin-left: 68px;
    padding-top: 13px;
    font-size: 16px;
    font-weight: 600;
}

.user-search-res-item .user-info {
    color: #8590a6;
    font-size: 14px;
    margin-left: 68px;
    margin-top: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-search-res-item .mdui-btn {
    float: right;
    z-index: 2;
    right: 0;
    bottom: 10px;
    padding: 0 8px;
}

.search-card-view-more {
    padding-bottom: 10px;
}

.search-card-view-more a {
    color: #175199;
}

.search-card-view-more a:hover {
    color: rgba(23, 81, 153, 0.56);
}

.side-edit-tool-btn {
    width: 100%;
    height: auto;
    line-height: 20px;
    white-space: normal;
}

.side-edit-tool-btn .mdui-icon {
    font-size: 16px;
    padding-right: 5px;
}

.side-edit-tool-content {
    padding-left: 12px;
    padding-right: 12px;
}

.info-helper-card-header {
    height: auto;
    padding: 10px 20px;
}

.info-helper-card-header .side-card-header-text {
    white-space: normal;
}

.topic-mobile-user-top {
    padding: 16px;
    height: auto;
    margin: -10px -10px;
    background: #f9f9f9;
    border-radius: 10px;
}

.topic-mobile-user-top .mdui-card-header-title {
    padding-right: 40px;
    white-space: normal;
}

.topic-mobile-user-top .mdui-card-header-subtitle {
    padding-right: 40px;
}

.mdui-card-header-title .layui-badge {
    line-height: 20px;
}

.topic-mobile-user-info-btn {
    position: absolute;
    right: 10px;
    top: 20px;
    -webkit-transition: -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
    transition: -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
    -webkit-transform: rotate(0);
    transform: rotate(0);

    will-change: transform;
}

.topic-mobile-user-info-btn-180 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.magnify-modal {
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.3);
}

.magnify-header .magnify-toolbar {
    width: 40px;
    background-color: rgba(0, 0, 0, .5);
}

.magnify-stage {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-width: 0;
}

.magnify-footer .magnify-toolbar {
    display: inline-block;
    height: 40px;
    background-color: rgba(0, 0, 0, .5);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.magnify-stage img {
    width: 0;
}

.magnify-loading {
    background-color: transparent;
}

#appbar-right-menu-btn img {
    width: 60%;
    height: auto;
    border-radius: 50%
}

.tip-page-icon {
    font-size: 120px;
}

.dialog-center-avatar {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin: 0 0 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.dialog-center-h1 {
    text-align: center;
    font-size: 18px;
    margin-top: 8px;
}

.dialog-center-h1-small {
    text-align: center;
    font-size: 14px;
}

.message-bubble-list {
    margin-top: 8px;
}

.message-bubble-item {
    position: relative;
    margin-bottom: 8px;
    min-height: 50px;
}

.message-bubble-avatar {
    position: absolute;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    top: 5px;
}

.message-bubble-username {
    margin-left: 53px;
}

.message-bubble-time {
    margin-left: 53px;
    font-size: 12px;
    color: #bbb;
}

.message-bubble-content {
    margin-left: 53px;
    margin-top: 2px;
    font-size: 15px;
    display: inline-block;
    padding: 8px;
    border-radius: 5px;
    word-break: break-all;
    background-color: rgba(3, 169, 244, 0.24);
    color: black;
}

.message-bubble-right {
    text-align: right;
}

.message-bubble-right .message-bubble-avatar {
    right: 0;
}

.message-bubble-right .message-bubble-username {
    margin-left: 0;
    margin-right: 53px;
    text-align: right;
}

.message-bubble-right .message-bubble-time {
    margin-left: 0;
    margin-right: 53px;
    text-align: right;
}

.message-bubble-right .message-bubble-content {
    margin-right: 53px;
    text-align: right;
    margin-left: 0;
    background-color: #03a9f4;
    color: white;
}

.message-content-form-div {
    position: absolute;
    width: 100%;
    bottom: 0;
}

.message-content-form {
    position: relative;
    width: 100%;
}

.message-content-form-textarea {
    margin-top: 20px;
    background-color: #f3f3f3;
    min-height: 35px;
    line-height: 35px;
    margin-right: 28px;
    margin-left: 22px;
    border-radius: 4px;
    font-size: 16px;
    padding: 0 5px;
    width: calc(100% - 60px);
}

.message-content-form-submit-btn {
    position: absolute;
    bottom: 2px;
    right: 4px;
}

#messageSendLoading {
    bottom: 5px;
    right: 5px;
    width: 25px;
    height: 25px;
}

.message-content-form-textarea-btn {
    position: absolute;
    bottom: 2px;
    left: -14px;

    -webkit-transition: -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
    transition: -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
    -webkit-transform: rotate(0);
    transform: rotate(0);

    will-change: transform;
}

.message-content-form-textarea-btn-45 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.message-img {
    max-width: 40%;
    border-radius: 8px;
    margin-left: 53px;
    margin-top: -25px;
    margin-bottom: 10px;
}

.message-bubble-right+figure {
    text-align: right;
}

.message-bubble-right+figure .message-img {
    margin-left: 0;
    margin-right: 53px;
}

.notify-card .mdui-card-primary-title {
    font-size: 20px;
    line-height: 30px;
}

.notify-card .mdui-card-primary-subtitle {
    opacity: unset;
    color: #666;
}

.notify-card .mdui-card-header {
    height: 56px;
    border-radius: 10px;
}

.notify-card .mdui-card-actions .mdui-btn {
    min-width: auto;
    padding: 0 8px;
    height: 26px;
    margin: 3px;
    line-height: 26px;
    border-radius: 5px;
}